<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	ArrayList<String> jsPaths = (ArrayList<String>) request
			.getAttribute("jsPaths");
	jsPaths.add("/resources/bootstrap/table/jquery.dataTables.min.js");
	jsPaths.add("/resources/bootstrap/table/dataTables.bootstrap.js");
	jsPaths.add("/resources/bootstrap/datePicker/moment.min.js");
	jsPaths.add("/resources/bootstrap/datePicker/bootstrap-datetimepicker.min.js");
	jsPaths.add("/resources/bootstrap/dist/js/typeahead.js");
	jsPaths.add("/resources/custom/exsitPadding/exsitPadding.js");
%>
<link
	href="${pageContext.request.contextPath}/resources/bootstrap/table/dataTables.bootstrap.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/resources/bootstrap/datePicker/bootstrap-datetimepicker.min.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath}/resources/bootstrap/dist/css/typeaheadjs.css"
	rel="stylesheet">
<script type="text/javascript">
	var errorMsg = "${error}";
</script>
<div id="alert-warning"
	class="alert alert-warning alert-dismissable hidden">
	<button type="button" class="close" data-dismiss="alert"
		aria-hidden="true">&times;</button>
</div>
<form role="form">
	<div class="row">
		<div class="form-group col-md-4">
			<div class="col-md-3">
				<label for="fc" class="control-label">FC:</label>
			</div>
			<div class="col-md-9">
				<input type="text"
					class="form-control column_filter column_filter suggestfc"
					placeholder="FC" data-column="1" id="col1_filter" />
			</div>
		</div>
		<div class="form-group col-md-5">
			<div class="col-md-5">
				<label for="sm" class="control-label">Ship Method:</label>
			</div>
			<div class="col-md-7">
				<input type="text" class="form-control column_filter suggestSM"
					data-column="2" id="col2_filter" placeholder="Ship Method" />
			</div>
		</div>
		<div class="form-group col-md-3">
			<div class="col-md-3">
				<label for="padding" class="control-label">Padding:</label>
			</div>
			<div class="col-md-9">
				<input type="text" class="form-control column_filter suggestPadding"
					data-column="3" id="col3_filter" placeholder="Padding" />
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-4">
			<div class="col-md-3">
				<label for="province" class="control-label">Province:</label>
			</div>
			<div class="col-md-9">
				<input type="text"
					class="form-control column_filter suggestProvince" data-column="4"
					id="col4_filter" placeholder="Province" />
			</div>
		</div>
		<div class="form-group col-md-4">
			<div class="col-md-3">
				<label for="city" class=" control-label">City:</label>
			</div>
			<div class="col-md-9">
				<input type="text" class="form-control  column_filter suggestCity"
					data-column="5" id="col5_filter" placeholder="City" />
			</div>
		</div>
		<div class="form-group col-md-4">
			<div class="col-md-3">
				<label for="district" class="control-label">District:</label>
			</div>
			<div class="col-sm-9">
				<input type="text"
					class="form-control  column_filter suggestDistrict" data-column="6"
					id="col6_filter" placeholder="District" />
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form-group  col-md-6">
			<div class="col-md-3">
				<label for="startDate" class="control-label">Start Date:</label>
			</div>
			<div class="col-sm-9">
				<input type='text'
					class="form-control  column_filterD column_filter" data-column="7"
					id="col7_filter" placeholder="Start Date"
					data-date-format="YYYY-MM-DD" />
			</div>
		</div>
		<div class="form-group  col-md-6">
			<div class="col-md-3">
				<label for="endDate" class="control-label">End Date:</label>
			</div>
			<div class="col-sm-9">
				<input type='text'
					class="form-control  column_filterD column_filter" data-column="8"
					id="col8_filter" placeholder="End Date"
					data-date-format="YYYY-MM-DD" />
			</div>
		</div>
	</div>
</form>

<div class="row">
	<button class="btn btn-success btn-sm" id="deployNewPadding">Deploy</button>
</div>

<div class="row">
	<div class="table-responsive">
		<table class="table table-striped" id="exsitPadding">
			<thead>
				<tr>
					<th>id</th>
					<th>FC</th>
					<th>Ship Method</th>
					<th>Province</th>
					<th>City</th>
					<th>District</th>
					<th>Padding</th>
					<th>Start Date</th>
					<th>End Date</th>
					<th>Reason</th>
					<th>Submit Time</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
</div>

<!-- deploy paddiing dialog -->
<div class="modal fade" id="deployNewPaddingModel">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title">Padding Deployment</h4>
			</div>
			<div class="modal-body">
				<p>This action will export a file for padding deployment, and
					current paddings will be set to deployed status, are you sure to do
					this?</p>
			</div>
			<form class="form-horizontal" role="form"
				action="${pageContext.request.contextPath}/ready/deploy"
				method="post">				
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Deploy</button>
				</div>
			</form>
		</div>
	</div>
</div>
